﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Points in Extent</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

    <script src="http://js.arcgis.com/3.14/"></script>
    <script>
        dojo.require("esri.map");
        dojo.require("esri.toolbars.draw");
        dojo.require("esri.tasks.query");

        //global variables
        var map, defaultSymbol, highlightSymbol, resultTemplate;

        function init() {
            //创建基础地图
            map = new esri.Map("map", {
                basemap: "streets",
                center: [-120.275, 47.485],
                zoom: 6,
                slider: false,
                showInfoWindowOnClick: false
            });
            //加载地图，初始化工具
            dojo.connect(map, "onLoad", initToolbar);
            var sr = new esri.SpatialReference({ wkid: 102100 })
            map.SpatialReference = sr;
            //创建符号
            defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 0, 255]));
            highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255, 0, 0]));

            //数据查询
            var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");
            var query = new esri.tasks.Query();
            query.where = "STATE_NAME = 'Washington'";
            query.outSpatialReference = map.SpatialReference;
            query.returnGeometry = true;
            query.outFields = ["CITY_NAME"];
            queryTask.execute(query, addPointsToMap);//添加到地图中

            //info template for points returned
            resultTemplate = new esri.InfoTemplate("City", "<tr><td>${CITY_NAME}</tr></td>");//信息显示
        }

        //initialize drawing toolbar
        function initToolbar(map) {
            var tb = new esri.toolbars.Draw(map);

            //find points in Extent when user completes drawing extent
            dojo.connect(tb, "onDrawEnd", findPointsInExtent);//绘图结束后

            //set drawing mode to extent
            tb.activate(esri.toolbars.Draw.EXTENT);//设置绘图模式
        }

        //添加点到地图
        function addPointsToMap(featureSet) {
            dojo.forEach(featureSet.features, function (feature) {
                map.graphics.add(feature.setSymbol(defaultSymbol).setInfoTemplate(resultTemplate));
            });
        }

        //范围查询
        function findPointsInExtent(extent) {
            var results = [];
            dojo.forEach(map.graphics.graphics, function (graphic) {
                if (extent.contains(graphic.geometry)) {
                    graphic.setSymbol(highlightSymbol);
                    results.push(graphic.getContent());
                }
                    //else if point was previously highlighted, reset its symbology
                else if (graphic.symbol == highlightSymbol) {
                    graphic.setSymbol(defaultSymbol);
                }
            });

            //display number of points in extent
            dojo.byId("inextent").innerHTML = results.length;//查询数量

            //display list of points in extent
            dojo.byId("results").innerHTML = "<table><tbody>" + results.join("") + "</tbody></table>";//查询结果
        }

        dojo.addOnLoad(init);
    </script>

  </head>
  <body class="claro">
    Draw an Extent on the map to find all points within this extent

    <!-- map div -->
    <div id="map" style="width:800px; height:400px; border:1px solid #000;"></div>
    <br />

    <!-- display number of points in drawn extent -->
    <b># of points in extent = <span id="inextent">0</span></b>

    <!-- list points in extent -->
    <div id="results" style="width:400px; height:200px; border:1px solid #000; overflow:auto;">
    </div>
  </body>
</html>
